<template>
  <el-card class="box-card">
    <!-- 试题录入 -->

         <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" >

        <el-form-item label="学科" prop="name">
          <el-select v-model="ruleForm.name" placeholder="请选择活动区域" class="selectstyle"  @change="subjectSelect">
            <el-option
            :label="item.label"
            :value="item.value"
            v-for="item in SubjectsSimpleList"
            :key="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录" prop="region">
          <el-select v-model="ruleForm.region" placeholder="请选择活动区域" class="selectstyle">
              <el-option
            :label="item.label"
            :value="item.value"
            v-for="item in SecondLevelList"
            :key="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="企业" prop="region">
          <el-select v-model="ruleForm.company" placeholder="请选择活动区域" class="selectstyle">
          <el-option
            :label="item.company"
            :value="item.id"
            v-for="item in companysList.items"
            :key="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="城市" prop="region" :inline="true">
          <el-select v-model="ruleForm.city" placeholder="请选择活动区域" class="selectstylefirst">
            <el-option label="重庆市" value="重庆市"></el-option>
            <el-option label="天津市" value="天津市"></el-option>
          </el-select>
          <el-select v-model="ruleForm.city1" placeholder="请选择活动区域" class="selectstylesecond">
            <el-option label="南岸区" value="南岸区"></el-option>
            <el-option label="和平区" value="和平区"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="方向" prop="region">
          <el-select v-model="ruleForm.direction" placeholder="请选择活动区域" class="selectstyle">
              <el-option label="o2o" value="o2o"></el-option>
              <el-option label="外包服务" value="外包服务"></el-option>
              <el-option label="企业服务" value="企业服务"></el-option>
              <el-option label="互联网金融" value="互联网金融"></el-option>
              <el-option label="企业咨询" value="企业咨询"></el-option>
              <el-option label="互联网" value="互联网"></el-option>
              <el-option label="电子商务" value="电子商务"></el-option>
              <el-option label="其他" value="其他"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="题型" >
          <el-radio-group v-model="ruleForm.types">
            <el-radio label="1" @change="showradio1" >单选</el-radio>
            <el-radio label="2" @change="checkbox1">多选</el-radio>
            <el-radio label="3"  @change="allhide">简答</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="难度">
          <el-radio-group v-model="ruleForm.difficulty">
            <el-radio label="1" >简单</el-radio>
            <el-radio label="2">一般</el-radio>
            <el-radio label="3">困难</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="题干" prop="desc">
          <el-input type="textarea" v-model="ruleForm.stem" ></el-input>
        </el-form-item>

         <!-- 单选项目 -->
        <el-form-item label="选项"  :inline="true" :class="{showradio:showradioCO}" >

          <div class="optionselect">
            <el-radio-group v-model="ruleForm.choice" >
                <!-- 1 -->
              <div class="flex1">
                <el-radio label="A:"></el-radio>
                <el-input v-model="ruleForm.content1" class="labelclass"></el-input>
                    <!-- 上传图片 -->
                <div class="photostyle">
                  <el-upload
                    class="upload-demo"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :before-remove="beforeRemove"
                    multiple
                    :limit="3"
                    :on-exceed="handleExceed"
                    :file-list="fileList">
                    <el-button size="small" type="primary">上传图片</el-button>
                    <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
                  </el-upload>
                </div>
              </div>

                  <!-- 2 -->
              <div class="flex1">
                <el-radio label="B:"></el-radio>
                <el-input v-model="ruleForm.content2" class="labelclass"></el-input>
                        <!-- 上传图片 -->
                <div class="photostyle">
                  <el-upload
                    class="upload-demo"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :before-remove="beforeRemove"
                    multiple
                    :limit="3"
                    :on-exceed="handleExceed"
                    >
                    <el-button size="small" type="primary">上传图片</el-button>
                  </el-upload>
                </div>
              </div>
                  <!-- 3 -->
                <div class="flex1">
                      <el-radio label="C:"></el-radio>
                        <el-input v-model="ruleForm.content3" class="labelclass"></el-input>
                          <!-- 上传图片 -->
                      <div class="photostyle">
                        <el-upload
                          class="upload-demo"
                          action="https://jsonplaceholder.typicode.com/posts/"
                          :on-preview="handlePreview"
                          :on-remove="handleRemove"
                          :before-remove="beforeRemove"
                          multiple
                          :limit="3"
                          :on-exceed="handleExceed"
                          >
                          <el-button size="small" type="primary">上传图片</el-button>
                        </el-upload>
                      </div>
                </div>
                  <!-- 4 -->

          <!-- +添加选项和答案   这是el-form-item里面的>>> （:label="'域名' + index"） -->
        <el-form :model="dynamicValidateForm"  label-width="0px" >
            <el-form-item
              v-for="(domain, index) in dynamicValidateForm.domains"

              :key="domain.key"
              :prop="'domains.' + index + '.value'"
            >

                <!-- 用v-model="domain.value进行的绑定需要修改 -->
                <!-- todo -->
              <div class="optionclass">
                <el-radio label="D:"></el-radio>
                <el-input v-model="ruleForm.content4" class="labelclass"></el-input>
                <!-- 上传图片 -->
                  <div class="photostyle">
                    <el-upload
                      v-model="domain.value"
                      class="upload-demo"
                      action="https://jsonplaceholder.typicode.com/posts/"
                      :on-preview="handlePreview"
                      :on-remove="handleRemove"
                      :before-remove="beforeRemove"
                      multiple
                      :limit="3"
                      :on-exceed="handleExceed"
                      >
                      <el-button size="small" type="primary">上传图片</el-button>
                    </el-upload>
                  </div>
              </div>

            </el-form-item>

        </el-form>
          <el-form-item class="formitem">
            <el-button @click="addDomain" disabled type="danger">+添加选项和答案</el-button>
          </el-form-item>

                <!-- 4 -->

          </el-radio-group>

          </div>

        </el-form-item>

        <!-- 多选项目 -->
         <el-form-item label="选项"  :inline="true" :class="{checkbox:checkboxCO}">
          <div class="optionselect">
            <el-checkbox-group v-model="ruleForm.checkList" >
                <!-- 1 -->
              <div class="flex1">
                <el-checkbox label="A:"></el-checkbox>
                <el-input v-model="ruleForm.content1" class="labelclass"></el-input>
                    <!-- 上传图片 -->
                <div class="photostyle">
                  <el-upload
                    class="upload-demo"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :before-remove="beforeRemove"
                    multiple
                    :limit="3"
                    :on-exceed="handleExceed"
                    :file-list="fileList">
                    <el-button size="small" type="primary">上传图片</el-button>
                    <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
                  </el-upload>
                </div>
              </div>

                <!-- 2 -->
              <div class="flex1">
                <el-checkbox label="B:"></el-checkbox>
                <el-input v-model="ruleForm.content2" class="labelclass"></el-input>
                    <!-- 上传图片 -->
                <div class="photostyle">
                  <el-upload
                    class="upload-demo"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :before-remove="beforeRemove"
                    multiple
                    :limit="3"
                    :on-exceed="handleExceed"
                    >
                    <el-button size="small" type="primary">上传图片</el-button>
                  </el-upload>
                </div>
              </div>
                  <!-- 3 -->
                <div class="flex1">
                <el-checkbox label="C:"></el-checkbox>
                <el-input v-model="ruleForm.content3" class="labelclass"></el-input>
                    <!-- 上传图片 -->
                <div class="photostyle">
                  <el-upload
                    class="upload-demo"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :before-remove="beforeRemove"
                    multiple
                    :limit="3"
                    :on-exceed="handleExceed"
                    >
                    <el-button size="small" type="primary">上传图片</el-button>
                  </el-upload>
                </div>
                </div>
                      <!-- 4 -->

              <!-- +添加选项和答案   这是el-form-item里面的>>> （:label="'域名' + index"） -->
            <el-form :model="dynamicValidateForm"  label-width="0px" >
                <el-form-item
                  v-for="(domain, index) in dynamicValidateForm.domains"

                  :key="domain.key"
                  :prop="'domains.' + index + '.value'"
                >

                    <!-- 用v-model="domain.value进行的绑定需要修改 -->
                    <!-- todo -->
                  <div class="optionclass">
                    <el-checkbox label="D:"></el-checkbox>
                    <el-input v-model="ruleForm.content4" class="labelclass"></el-input>
                     <!-- 上传图片 -->
                    <div class="photostyle">
                      <el-upload
                        v-model="domain.value"
                        class="upload-demo"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :before-remove="beforeRemove"
                        multiple
                        :limit="3"
                        :on-exceed="handleExceed"
                        >
                        <el-button size="small" type="primary">上传图片</el-button>
                      </el-upload>
                    </div>
                  </div>

                </el-form-item>

            </el-form>
              <el-form-item class="formitem">
                <el-button @click="addDomain"  type="danger">+添加选项和答案</el-button>
              </el-form-item>

                    <!-- 4 -->

              </el-checkbox-group>

              </div>
        </el-form-item>

        <el-form-item label="视频解析">
          <el-input type="textarea" v-model="ruleForm.video"></el-input>
        </el-form-item>

        <el-form-item label="答案解析" prop="desc">
          <el-input type="textarea" v-model="ruleForm.answer"></el-input>
        </el-form-item>

        <el-form-item label="题目备注">
          <el-input type="textarea" v-model="ruleForm.remark"></el-input>
        </el-form-item>

         <el-form-item label="试题标签">
            <el-select v-model="ruleForm.tags" multiple placeholder="请选择试题标签" class="selectstyle">
              <el-option
                v-for="item in TagsSimpleList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
        </el-form-item>


        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">确认提交</el-button>
        </el-form-item>
    </el-form>




  </el-card>
</template>

<script>
import { mapState, mapActions} from "vuex";
import * as testmanagementApi from '@/api/testmanagement';


export default {
  data() {
    return {
       ruleForm: {
          name: null,
          region: null,
          company: null,
          city: null,
          city1: null,
          direction: null,
          // 题型
          types:  '1',
          // 难度
          difficulty: '1',
          stem: null,
          // 单选框
          choice: '',
          // 复选框
          checkList: [''],
          video: '',
          answer: null,
          remark: '',
          tags: '',
          // 输入框
          content1:'',
          content2:'',
          content3:'',
          content4:'',

        },
        // 验证规则
          rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          region: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ],
          date1: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          date2: [
            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
          ],
          type: [
            { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
          ],

          desc: [
            // { required: true, message: '请输入活动名称', trigger: 'blur' },
          ]
        },
        // 上传功能...
          fileList: [
            // {name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}
            ],
        // +添加选项和答案
          dynamicValidateForm: {
          domains: [{
            value: ''
          }],
        },
        showradioCO: false,
        checkboxCO: true,


    };
  },
  computed: {
    ...mapState("testmanagement",[
      //  学科下拉菜单
      "SubjectsSimpleList",
      // 学科二级目录（新添加）
      "SecondLevelList",
      // 获取试题标签选项数据
      "TagsSimpleList",
       // 基础题库详情 题目预览
      "LookOverList",

    ]),
    ...mapState("companys",[
      //  企业列表
      "companysList",

    ]),

  },
  methods: {
     ...mapActions("testmanagement",[
        //  更新学科下拉菜单
        "updateSubjectsSimpleList",
        // 学科二级目录（新添加）
        "updateSecondLevelList",
        // 获取试题标签选项数据
        "updateTagsSimpleList",
          // 基础题库详情 题目预览
        "updateLookOverList",

      ]),
     ...mapActions("companys",[
        //  更新企业列表
        "updateCompanysList",

      ]),
      // 立即创建按钮
      submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
        });
        testmanagementApi.addTest({
          // 学科
          subjectID: this.ruleForm.name,
          // 目录
          catalogID: this.ruleForm.region,
          // 企业
          enterpriseID: this.ruleForm.company,
          // 城市
          province: this.ruleForm.city,
          // 地区
          city: this.ruleForm.city1,
          // 方向
          direction: this.ruleForm.direction,
          // 题型
          questionType: this.ruleForm.types ,
          // 难度
          difficulty: this.ruleForm.difficulty,
          // 题干
          question: this.ruleForm.stem,
          // 选项
          options:[
            {
            // 是否正确答案
            isRight: this.ruleForm.choice,
            // 图片URL
            img: '',
            // 标题
            title: this.ruleForm.content1,
            // 代码
            code: 'A',
          },
            {
            // 是否正确答案
            isRight: false,
            // 图片URL
            img: '',
            // 标题
            title: this.ruleForm.content2,
            // 代码
            code: 'B'
          },
            {
            // 是否正确答案
            isRight: false,
            // 图片URL
            img: '',
            // 标题
            title:this.ruleForm.content3,
            // 代码
            code: 'C'
          },
            {
            // 是否正确答案
            isRight: false,
            // 图片URL
            img: '',
            // 标题
            title: this.ruleForm.content4,
            // 代码
            code: 'D'
          }
          ],
          // 解析视频
          videoURL: this.ruleForm.video,
          // 答案解析
          answer: this.ruleForm.answer,
          // 题目备注
          remarks: this.ruleForm.remark,
          // 试题标签
          tags: this.ruleForm.tags,

        })

      },
      // 上传功能...
       handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },
      // +添加选项和答案

      addDomain() {
        this.dynamicValidateForm.domains.push({
          value: '',
          key: Date.now()
        });
      },
      // 选择单选显示单选框
      showradio1(){
        this.showradioCO = false
        this.checkboxCO = true
      },
      // 选择多选显示多选框
      checkbox1(){
        this.showradioCO = true
        this.checkboxCO = false
      },
      // 选择简答全部消失
      allhide(){
        this.showradioCO = true
        this.checkboxCO = true
      },
      // 点击学科监听事件
      subjectSelect(data){
        console.log(data);
        // 获取二级菜单
        this.updateSecondLevelList({
          subjectID: data
        });
        // 获取试题标签选项数据
        this.updateTagsSimpleList({
         subjectID: data

        })
      }

  },
  async created() {
      // 获取学科列表
   this.updateSubjectsSimpleList()
     //  企业列表
   this.updateCompanysList({
     pagesize: 10000
    });
    // 以下是通过路由跳转获取值
    // 基础题库详情 这是通过获取前面页面Id获取来渲染数据
   await this.updateLookOverList({
     id: this.$route.params.id
    });
     // 获取二级菜单
    this.updateSecondLevelList({
      subjectID: this.$route.params.id
    });
    // 获取试题标签选项数据
    this.updateTagsSimpleList({
      subjectID: this.$route.params.id

    });

    this.ruleForm={
          name: this.LookOverList.subjectName,
          region: this.LookOverList.directoryName,
          company:this.LookOverList.enterpriseID,
          city: this.LookOverList.province,
          city1: this.LookOverList.city,
          direction: this.LookOverList.direction,
          // 题型
          types: this.LookOverList.questionType,
          // 难度
          difficulty: this.LookOverList.difficulty,
          stem: this.LookOverList.question,
          // 单选框
          choice: '',
          // 复选框
          checkList: [''],
          video: this.LookOverList.videoURL,
          answer: this.LookOverList.answer,
          remark:  this.LookOverList.remark,
          tags: this.LookOverList.tags,
          // 输入框
          content1: this.LookOverList.options.title,
          content2:this.LookOverList.options.title,
          content3:this.LookOverList.options.title,
          content4:this.LookOverList.options.title,

    }




  },


}
</script>

<style lang="scss" scoped>
  .box-card {
    margin: 16px;
  }
  .selectstyle {
    width: 400px;
  }
  .selectstylefirst {
    width: 200px;
    padding-right: 5px;
  }
  .selectstylesecond {
    width: 200px;
    // padding-right: 5px;
  }

  .labelclass {
    width: 100px;
  }

  .optionclass {
    display: flex;
    align-items: center;
    // margin-top: 10px;
    // display:none
  }
  .photostyle {
    // outline: 1px solid gold;
    display: inline-block;
  }
  .formitem {
    margin-top: 8px;
  }

.clala {
  width: 100px;
  height: 100px;
}
// 控制单选框显示消失
.showradio {
  display:none
}
// 控制多选框显示消失
.checkbox {
  display:none
}
.optionselect {
  display: flex;
}
.flex1 {
  flex: 1;
}
.showinput {
   display:none
}
.showchange {
   display:none
}



</style>
